<template>
  <div class="container">
    <page-header/>
    <el-menu
      :default-active="(homeClassify.length-1)+''"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item :index="index+''" v-for="(item,index) in homeClassify" v-bind:key="index">
        <el-link :href="index < homeClassify.length - 1 ? '/?i='+index : '/classify'">{{item.channel_name}}</el-link>
      </el-menu-item>
    </el-menu>

    <h3 style="margin-top: 10px">分类</h3>
    <div>
      <ul v-for="(item,index) in classify" v-bind:key="index" class="selector">
        <li :class="[select[0]===index ? 'selected':'']" @click="typeSelected(0,index)">{{item.name}}</li>
      </ul>
    </div>

    <div v-for="(item,index) in classify[select[0]].childClassify" v-bind:key="index" style="clear: both">
      <ul v-for="(item1,index1) in item.classifyContent" v-bind:key="index1" class="selector">
        <li :class="[select[index+1]===index1 ? 'selected':'']" @click="typeSelected(index+1,index1)">{{item1.name}}
        </li>
      </ul>
    </div>

    <div style="clear: both">
      <el-row>
        <el-col :span="8" v-for="(item,index) in list" v-bind:key="index">
          <el-link :href="item.detailurl">
            <el-image :src="item.coverurl" fit="cover" class="cover"/>
            <div class="name">{{item.title}}</div>
          </el-link>
        </el-col>
      </el-row>
    </div>

    <div class="load_more" @click="load" v-if="!loading">点击加载更多内容</div>
    <div v-if="noMore" class="load_desc">全部加载完成~~</div>
    <div v-if="loading" class="load_desc">正在加载中</div>

  </div>

</template>

<script>
  import axios from "axios";

  var currentPage = 1;
  var queryTag = "";

  //请求获取数据
  function doQuery(that, tag) {
    that.loading = true;
    var selectClassify = that.classify[that.select[0]];
    var params = selectClassify.keyName + "=" + encodeURI(selectClassify.id);
    for (let i = 0; i < 3; i++) {
      params += "&" + selectClassify.childClassify[i].keyName + "=" + encodeURI(selectClassify.childClassify[i].classifyContent[that.select[i + 1]].id);
    }
    params += "&pn=" + currentPage;
    axios.get("/down/daHai/classifyContent?" + params).then(function (response) {
      if (tag !== queryTag) {
        return;
      }
      that.loading = false;
      let hasNext = response["data"]["data"]["page"]["hasNext"];
      that.noMore = !hasNext;
      let datas = that.list;
      if (currentPage === 1) {
        datas = [];
      }
      let resultList = response["data"]["data"]["data"];
      for (let i = 0; i < resultList.length; i++) {
        datas.push(resultList[i]);
      }
      that.list = datas;
      currentPage++;
    }).catch(function (error) {
      console.log(error);
      if (tag !== queryTag) {
        return;
      }
      that.loading = false;
    });

  }

  export default {
    name: "Classify",

    data() {
      return {
        select: [0, 0, 0, 0, 0],
        noMore: false,
        loading: false,
        list: []
      }
    },
    mounted() {
      doQuery(this, "");
    },
    methods: {
      typeSelected: function (pos, index) {
        if (pos === 0) {
          this.select = [index, 0, 0, 0, 0];
        }
        this.select.splice(pos, 1, index);
        queryTag = this.select.toString();
        currentPage = 1;
        doQuery(this, queryTag);
      },

      load: function () {
        queryTag = this.select.toString();
        doQuery(this, queryTag);
      }
    },

    async asyncData({params}) {
      let homeClassify = await axios.get('http://47.117.121.53:8080/down/daHai/homeClassify');
      let content = await axios.get('http://47.117.121.53:8080/down/daHai/classify');
      homeClassify.data.data.result.push({"channel_name": "分类"});
      return {
        homeClassify: homeClassify.data.data.result,
        homeContent: content.data.data.data,
        classify: content.data.data.classify,
      }
    }
  }
</script>

<style lang="scss">
  @import "assets/Common";

  .selector {
    display: block;
    padding-left: 0;

    li {
      height: 30px;
      list-style: none;
      line-height: 40px;
      width: 50px;
      text-align: center;
      float: left;
    }

    li.selected {
      color: $--color-primary;
    }

    li:hover {
      cursor: pointer;
      color: $--color-primary;
    }

    &:nth-child(n+2) li {
      margin-left: 10px;
    }
  }

  .el-link {
    width: 100%;
    display: block;
  }

  .infinite-list-wrapper {
    height: 600px;
  }

  .el-image {
    width: 100%;
    height: 400px;
  }

  .el-row {
    .el-col {
      margin-top: 10px;
    }

    .el-col {
      padding-left: 10px;
    }
  }

  .name {
    margin-top: 10px;
    color: #333333;
    font-size: 18px;
  }

  .load_more {
    width: $--window-width;
    background-color: #f2f2f2;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    margin-top: 10px;
  }

  .load_desc {
    line-height: 40px;
    text-align: center;
    margin-top: 10px;
  }

</style>

